<template>
  <view class="page min-vh-100 d-flex flex-column">
    <StatusBar></StatusBar>
    <view class="text-center pb-2" style="background-color:#FF9900;color: white;">
      <view class="my-3 text-center fs-4 fw-bold">
        平安期货
      </view>
      <view class="text-center fs-6 fw-bold">
        平安集团旗下唯一大宗商品交易平台
      </view>
      <view class="text-center">
        客服热线: 400-8888-933
      </view>
      <view class="text-center">
        (交易日8:30-凌晨02:30)
      </view>
    </view>
    <view class="d-flex justify-content-between mb-2 p-2 cardBg">
      <view class="d-flex align-items-center">
        <image src="/static/img/参与.svg" style="width: 80rpx; height: 100rpx"></image>
        <view class="ms-2">
          <view class="fw-bold">
            三月
            <text style="color: #FF9900">股指原油</text>
            交易月
          </view>
          <view style="font-size:0.8rem;color:#A4A4A4;">
            新用户最高可赢
            <text style="color: #FF9900">850元</text>
            加油卡
          </view>
        </view>
      </view>
      <view @tap="goto('/pages/start/start')" class="d-flex justify-content-center align-items-center fs-4 fw-bold px-2 rounded"
            style="background-color: #FF6600;color:white;--bs-border-radius: 1rem">
        立即参与
      </view>
    </view>
    <view class="py-1" style="background-color: #f2f2f2"></view>
    <view class="cardBg flex-grow-1">
      <view class="d-flex flex-wrap justify-content-start">
        <view v-for="(item,index) in itemList" :key="index"  @click="goto(item.link)"
              class="col-4 p-3 d-flex justify-content-center flex-column">
          <view class="w-100 ratio ratio-1x1">
            <image :src="item.icon"></image>
          </view>
          <view class="text-center">{{ item.name }}</view>
        </view>
        <CustomerService1 class="col-4 p-3 d-flex justify-content-center flex-column"></CustomerService1>
      </view>
    </view>
    <CustomTabBar></CustomTabBar>
  </view>
</template>

<script>
import CustomerService1 from "../common/CustomerService1.vue";
import StatusBar from "../common/StatusBar.vue";
import CustomTabBar from "../common/CustomTabBar.vue";

export default {
  name: 'home',
  components: {
    CustomTabBar,
    StatusBar,
    CustomerService1,
  },
  data() {
    return {
      center: "center",
      content: '顶部弹 popup',
      type: '',
      itemList: [
        {
          name: '保证金计算器',
          icon: '/static/img/保证金计算器.svg',
          link: '/pages/worke/margin_calculator/margin_calculator'
        },
        {
          name: '适当性测试',
          icon: '/static/img/适当性测试.svg',
          link: '/pages/worke/margin_calculator/margin_calculator'
        },
        {
          name: '交易提醒',
          icon: '/static/img/交易提醒.svg',
          link: '/pages/worke/trading_reminder/trading_reminder'
        },
        {
          name: '特殊品种开户',
          icon: '/static/img/特殊品种开户.svg',
          link: '/pages/worke/special_varieties_account/special_varieties_account'
        },
      ],
    }
  },
  methods: {
    goto(url) {
      uni.navigateTo({
        url: url,
      });
    },
  },
}
</script>

<style>
.cardBg {
  background-color: white;
}
</style>
